<style lang="less">
  .sc-header {
    display: none;
  }

  .huise {
    background: #ccc;
  }

  .huise:active {
    color: #f1f1f1;
  }

  .clr:before, .clr:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
  }

  .clr:after {
    clear: both;
    overflow: hidden;
  }

  .clr {
    zoom: 1; /* for IE6 IE7 */
  }

  .sc-calendar {
    padding: 0;
  }

  html {
    font-size: 62.5%;

  }

  .fanlifangan {
    padding: 10px;
    background: #fff;
    h3 {
      font-size: 14px;
      padding: 5px 0;
    }
    p {
      padding: 5px 0;
      text-indent: 20px;
      line-break: 20px;
      color: #606266;
      font-size: 14px;
      span {
        font-size: 16px;
        font-family: Arial;
        padding: 0 3px;
        color: #F56C6C
      }
    }
  }
</style>

<template>
  <div v-loading="loading" class="vipsign">
    <load-more v-if="form.type == undefined" :show-loading="false" tip="暂未设置签到规则"
               background-color="#fbf9fe"></load-more>
    <div v-else>
      <div class="fanlifangan">
        <h3>签到规则</h3>
        <div>
          <p v-if="form.type">
            按次签到送积分,连续签到<span>{{form.sign_number}}</span>次,获得积分<span>{{form.integral_number}}</span>分
            <template v-if="!form.is_break">,中途不可断开</template>
          </p>
          <p v-else>
            按天签到送积分,签到一天获得积分<span>{{form.integral_number}}</span>分
          </p>
          <p>当前积分<span>{{jifen}}</span>分</p>
        </div>
      </div>
      <div style="padding:10px;">
        <div id='calendar' class="clr"></div>
      </div>


      <div style="padding:10px;">
        <x-button type="primary" :show-loading="submiloading" @click.native="submit">签到</x-button>
      </div>
    </div>


  </div>
</template>

<script>
  import '@/assets/simple-calendar.js'
  import '@/assets/simple-calendar.css'
  // import {regionData as addressData1} from 'element-china-area-data'
  import {ChinaAddressV4Data as addressData} from 'vux'

  export default {
    directives: {},
    components: {},
    data() {
      return {
        form: {},
        jifen: 0,
        loading: false,
        submiloading: false,
        myCalendar: null
      }
    },
    methods: {
      initdata() {
        this.loading = true;
        this.$http.member.get('sign/vipNowRecord').then(res => {
          if (!res.data.code) {
            let mark = {};
            this.jifen = res.data.data.jifen;
            res.data.data.data.map(i => {
              let a = i.created_at.substring(0, 10).split('-');
              a[1] = a[1] < 10 ? a[1].substring(1) : a[1]
              a[2] = a[2] < 10 ? a[2].substring(1) : a[2]
              mark[a.join('-')] = '签'
            })
            new SimpleCalendar('#calendar', {
              showLunarCalendar: false, //农历
              showHoliday: false, //休假
              showFestival: false, //节日
              showLunarFestival: false, //农历节日
              showSolarTerm: false, //节气
              mark
            });
          }
          this.loading = false;
        })
      },
      initform() {
        this.loading = true;
        //rule
        this.$http.member.get('sign/vip_rule').then(res => {
          if (!res.data.code) {
            this.form = res.data.data;
            this.initdata();
          } else {
            this.loading = false;
          }
        }, err => {
          // console.log(err)
          this.$message({
            message: '登陆过期，请重新登陆！',
            type: 'error'
          });
          localStorage.removeItem('user');
          localStorage.removeItem('company');
          localStorage.removeItem('api_token');
          localStorage.removeItem('refresh_token');
          location.reload()
          this.loading = false;
        })
      },
      submit() {
        this.submiloading = true;
        this.$http.member.post('sign').then(res => {
          if (!res.data.code) {
            // this.$message.success('签到成功')
            this.$toast.success('签到成功')
            this.initdata();
          } else {
            this.$toast.fail('签到失败,' + res.data.message)
            // this.$message.error('签到失败,'+res.data.message)
          }
          this.submiloading = false;
        })
      }
    },
    computed: {},
    mounted() {
      this.initform();
    },
    created() {
    },
    watch: {}
  }
</script>
